<template>
  <div id="myChart" style="width:100%;height: 100%"></div>
</template>
<script>
  import echarts from 'echarts'

  export default {
    name: 'myChart',
    props: {
      queryUrl: String,
      chartData:Array
    },
    data() {
      return {
        chartOptions: [],
        chartType: 'bar',
        chart:[],
      }
    },
    methods: {
      // getChartData() {
      //   let thatData = [];
      //   this.$Bus.$on('chartParams',(queryURL) =>{
      //     console.log(chartData);
      //     // thatData = chartData;
      //     this.$axios.get(queryURL).then(function (res) {
      //       if(res.code==200){
      //         thatData = res.body;
      //       }else{
      //         that.$message(res.message);
      //       }
      //     }).catch(function (error) {
      //       console.log(error);
      //     });
      //   });
      //   return thatData;
      //   console.log(thatData);
      // },
      init(val,chartData) {
        this.chartOptions = chartData;
        console.log(this.chartOptions);
        console.log(val);
        let option = {};
        if(val === 'bar'){
          option = this.$changeChart.toBarchartData(this.chartOptions);
        }else if(val === 'line'){
          option = this.$changeChart.toLinechartData(this.chartOptions);
        }else if (val === 'pie'){
          option = this.$changeChart.toPiechartData(this.chartOptions);
        }
        console.log(option);
        const myChart = echarts.init(document.getElementById('myChart'));
        //清空画布
        myChart.clear();
        myChart.setOption(option);

        window.addEventListener('resize', function () {
          myChart.resize()
        })
      },

    },
    mounted() {
      // this.getChartData();
      this.chart=this.chartData;
      this.init(this.chartType,this.chart);
    },
    created() {
      let that = this;
      this.$Bus.$on('chartType', (type) => {
        that.chartType = type;
      });
      // this.$Bus.$on('chartData', (chartData) => {
      //   that.chartData = chartData;
      // });
    },
    watch:{
      chartType(newVal, oldVal) {
        console.log(newVal,oldVal);
        this.chartType=newVal;
        this.init(newVal,this.chartData);
      },
      chartData(newValue,oldValue){
        // this.chartData = newValue;
        this.init(this.chartType,newValue);
      }
    },
    // computed:{
    //   chartType
    // }
  }
</script>
